﻿
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_AdminLayout.cshtml";
}
@section styles{
    <style>
        .el-upload__input {
    display: none;
}
        input[type="file"] {
    display: none;
}
    </style>
}
<!-- demo root element -->
<div id="app" class="box box-primary">
    <div class="box-header with-border">
        <ol class="breadcrumb" style="padding:0px;margin:1px;">
            <li><a href="/Product/Index"><i class="fa fa-dashboard"></i>商品管理</a></li>
            <li class="active"><a href="/Product/Create">新增商品</a></li>
        </ol>
    </div>
    <!-- /.box-header -->
    <!-- form start -->
    <el-form :model="model" :rules="rules" ref="model" label-position="right" label-width="100px" style="margin: 20px;" class="demo-model">
        <el-tabs type="border-card">
            <el-tab-pane label="基本信息">
                <div>
                    <el-form-item label="品类" prop="categoryId">
                        <el-col span="6">
                            <category-selector v-model="model.categoryId" placeholder="品类"></category-selector>
                        </el-col>
                        <el-col span="8">
                            <el-form-item label="品牌" prop="brandId">
                                <brand-selector v-model="model.brandId" placeholder="品牌"></brand-selector>
                            </el-form-item>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="商品短名" prop="name">
                        <el-col span="6">
                            <el-input v-model="model.name" placeholder="商品短名（后台显示短名字）" clearable></el-input>
                        </el-col>
                        <el-col span="8">
                            <el-form-item label="商品长名" prop="showName">
                                <el-input v-model="model.showName" placeholder="商品长名（网站上显示长名字）" clearable></el-input>
                            </el-form-item>
                        </el-col>
                    </el-form-item>

                    <el-form-item label="卖点描述" prop="sellingPoint">
                        <el-col span="6">
                            <el-input v-model="model.sellingPoint" placeholder="商品卖点，促销语描述（显示商品长名称下面）" clearable></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="原价" prop="oldPrice">
                        <el-col span="6">
                            <el-input-number size="medium" v-model="model.oldPrice" :precision="2" :step="1" :min="0" :max="999999"></el-input-number>（划线价）
                        </el-col>
                        <el-col span="12">
                            <el-form-item label="销售价" prop="salePrice">
                                <el-input-number size="medium" v-model="model.salePrice" :precision="2" :step="1" :min="0" :max="999999"></el-input-number>（实际卖价）
                            </el-form-item>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="规格" prop="specification">
                        <el-col span="6">
                            <el-input v-model="model.specification" placeholder="规格" clearable></el-input>
                        </el-col>
                        <el-col span="8">
                            <el-form-item label="单位" prop="unit">
                                <el-input v-model="model.unit" placeholder="单位" clearable></el-input>
                            </el-form-item>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="产地" prop="madeIn">
                        <el-col span="6">
                            <el-input v-model="model.madeIn" placeholder="产地" clearable></el-input>
                        </el-col>
                        <el-col span="6">
                            <el-form-item label="等级" prop="grade">
                                <el-input v-model="model.grade" placeholder="等级" clearable></el-input>
                            </el-form-item>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="上架状态">
                        <el-radio-group v-model="model.status">
                            <el-radio :label="1" checked>上架</el-radio>
                            <el-radio :label="2">下架</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </div>
            </el-tab-pane>           
            <el-tab-pane label="商品图片">
                <div>
                    <el-form-item label="商品图片">
                        <el-radio-group v-model="model.comeFrom" v-on:change="changeImage">
                            <el-radio label="website">站内上传</el-radio>
                            <el-radio label="internet">外链图片</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="商品主图" v-show="model.comeFrom=='website'">
                        <el-upload action=""
                                   :auto-upload="false"
                                   :limit="1"
                                   :file-list="pictures"
                                   list-type="picture-card"
                                   :on-preview="handlePictureCardPreview"
                                   :on-remove="handleRemove"
                                   :on-change="getFile">
                            <i class="el-icon-plus"></i>
                            <div slot="tip" class="el-upload__tip">图片规格：800*800</div>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="外链图片" v-show="model.comeFrom=='internet'">
                        <el-col span="8">
                            <el-input v-model="model.imageUrl" placeholder="使用用外部图片链接" clearable></el-input>
                        </el-col>
                    </el-form-item>
                </div>
            </el-tab-pane>
        </el-tabs>
        <div class="form-group"></div>
        <el-form-item >
            <el-button v-on:click="resetForm">取消</el-button>
            <el-button type="primary" v-on:click="submitForm('model')">保存</el-button>
        </el-form-item>
    </el-form>
</div>
@section scripts{
    <script src="~/Content/vue/plugins/brand-selector/brand-selector.js" type="text/javascript"></script>
    <script src="~/Content/vue/plugins/category-selector/category-selector.js" type="text/javascript"></script>
    <script>

        var moneyCheck = function validator(rule, value, callback) {
            var reg = /^(([1-9]\d{0,9})|0)(\.\d{1,2})?$/
            if (reg.test(value)) {
                callback()
            } else {
                callback(new Error('请输入大于等零的有效金额，最多两位小数'))
            }
        };

        var vue = new Vue({
            components: {
            },
            el: '#app',
            data: {
                model: {
                    id: 0, categoryId: 0, brandId: 0, name: '', showName: '', sellingPoint: '', oldPrice: '', salePrice: '',
                    specification: '', unit: '', madeIn: '详见商品', grade: '合格', barCode: '', goodsNo: '', status: 1,
                     imageName: '', imageBase64: '', comeFrom: 'website',imageUrl:''
                },
                rules: {
                    categoryId: [{ required: true, message: '请选择商品品类', trigger: 'change' }],
                    brandId: [{ required: true, message: '请选择商品品牌', trigger: 'change' }],
                    name: [{ required: true, message: '请输入商品短名称', trigger: 'blur' }, { min: 2, max: 14, message: '长度在 2 到 14 个字符' }],
                    showName: [{ required: true, message: '请输入商品长名称', trigger: 'blur' }],
                    salePrice: [{ required: true, message: '请输入商品售价', trigger: 'blur' }]
                },
                dialogImageUrl: '',
                pictures: []

            },
            methods: {
                submitForm: function (formName) {
                    var _self = this;
                    this.$refs[formName].validate((valid) => {
                        if (!valid) { return; }
                        var v_data = _self.model;
                        $.post("/Product/Create", v_data, function (result) {
                            if (result.success) {
                                vue.$alert('保存成功', '成功', {
                                    confirmButtonText: '确定',
                                    callback: action => {
                                        window.location.href = "/Product/Create";
                                    }
                                });
                            }
                            else {
                                vue.$message({
                                    type: 'error',
                                    message: result.error
                                });
                            }
                        }, "json");
                    });
                },
                resetForm: function () {
                    window.location = "/Product/Index";
                },
                CreateBarCode: function () {
                    var _self = this;
                    $.get("/Product/GenerateBarCode", function (result) {
                        if (result.success) {
                            _self.model.barCode = result.data;
                        }
                        else {
                            vue.$message({
                                type: 'error',
                                message: result.error
                            });
                        }
                    }, "json");
                },
                handleRemove(file, fileList) {
                    // console.log(file, fileList);
                    this.model.imageBase64 = "";
                    that.model.imageName = "";
                },
                handlePictureCardPreview(file) {
                   // this.dialogImageUrl = file.url;
                    // console.log("select" + file.name);
                   
                },
                getFile(file, fileList) {
                    //console.log("getfile" + file.name);
                    //console.log(fileList);
                    //var that = this;
                    //console.log("--------------")
                    //this.getBase64(file.raw).then(res => {
      
                    //   // this.pictures[0].url = res;
                    //  console.log(fileList);
                    //});
                     that = this;
                    this.getBase64(file.raw).then(img => {
                        that.model.imageBase64 = img;
                        that.model.imageName = file.raw.name;
                    });

                },
                getBase64(file) {
                    return new Promise(function (resolve, reject) {
                        let reader = new FileReader();
                        let imgResult = "";
                        reader.readAsDataURL(file);
                        reader.onload = function () {
                            imgResult = reader.result;
                        };
                        reader.onerror = function (error) {
                            reject(error);
                        };
                        reader.onloadend = function () {
                            resolve(imgResult);
                        };
                    });
                },
                changeImage() {
                    this.model.imageUrl = "";
                    this.model.imageBase64 = "";
                    this.pictures = [];
                }
            }

        });

    </script>
}

